<template>
  <div>
    <div class="right-1">
      <component
        v-for="(item, index) in comps1"
        :key="index"
        :is="item"
      ></component>
    </div>
    <div class="right-2">
      <component
        v-for="(item, index) in comps2"
        :key="index"
        :is="item"
      ></component>
    </div>
  </div>
</template>

<script>
import publicSafety from './right1/publicSafety.vue'
import warnJudgment from './right1/warnJudgment.vue'
import ecoOperation from './right2/ecoOperation.vue'
import publicService from './right2/publicService.vue'
export default {
  name: "MainRight",
  data() {
    return {
      comps1: [publicSafety,warnJudgment],
      comps2: [ecoOperation,publicService],
    };
  },
  created() {
  },
  mounted() {},
  methods: {
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.right-1{
  width: 50%;
  padding: 0px 5px 0px 10px;
  box-sizing: border-box;
  float: left;
}
.right-2{
  width: 50%;
  float: left;
}
</style>
 